<html>
  <head></head>
</html>
<body>
  <h1 style="text-align: center">Css学习</h1>
  <hr style="border: 1px solid red" />

  <label>
    <div class="div-one">
      感冒：我大抵是病了，横竖都不舒服，胡乱吞了一包药，便又和衣睡下。头昏昏沉沉的，做什么都没有了力气。吃药是七天，不吃药也是七天，我向来是知晓的。黯黯然吸了一下鼻子，好家伙，一边是堵的，另一边还是堵的。
    </div>
  </label>
  <label>
    <div class="div-two">
      感冒：我大抵是病了，横竖都不舒服，胡乱吞了一包药，便又和衣睡下。头昏昏沉沉的，做什么都没有了力气。吃药是七天，不吃药也是七天，我向来是知晓的。黯黯然吸了一下鼻子，好家伙，一边是堵的，另一边还是堵的。
    </div>
  </label>
</body>
<style>
  .div-one {
    /* 指定宽度 */
    width: 500px;
    /* 文字不换行一行显示，会出现滚动条 */
    white-space: nowrap;
    /* 不显示滚动条 */
    overflow: hidden;
    /* 超出的部分使用省略号显示 */
    text-overflow: ellipsis;
  }
  .div-two {
    /* 溢出隐藏 */
    overflow: hidden;     
    /* 溢出用省略号显示  */
    text-overflow: ellipsis;    
    /* 作为弹性伸缩盒子模型显示。 */
    display:-webkit-box;       
    /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
    -webkit-box-orient:vertical; 
    /* 显示的行数 */
    -webkit-line-clamp:4;    
     /* 指定宽度 */  
    width: 200px;
  }
</style>
